<template>
  <view class="phone-container">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="title">输入手机号</text>
      <text class="subtitle">请输入您的手机号码以继续</text>
    </view>

    <!-- 手机号输入区域 -->
    <view class="input-area">
      <view class="phone-input-box">
        <text class="area-code">+86</text>
        <input
          type="number"
          class="phone-input"
          maxlength="11"
          :value="phoneNumber"
          @input="handlePhoneInput"
          placeholder="请输入手机号码"
          placeholder-class="input-placeholder"
        />
        <view class="status-icon" v-if="phoneNumber">
          <text v-if="isValidPhone" class="valid-icon">✓</text>
          <text v-else class="clear-icon" @click="clearPhone">×</text>
        </view>
      </view>
      <text v-if="errorMsg" class="error-tip">{{ errorMsg }}</text>
    </view>

    <!-- 按钮区域 -->
    <view class="button-area">
      <button
        class="submit-btn"
        :class="{ 'btn-active': isValidPhone }"
        :disabled="!isValidPhone"
        @click="handleSubmit"
      >
        下一步
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getCodeAPI } from '@/services/loginApi'
import { useMemberStore } from '@/stores'
// 常量定义
const PHONE_REGEX = /^1[3-9]\d{9}$/
const ERROR_MESSAGES = {
  INCOMPLETE: '请输入完整的手机号码',
  INVALID: '请输入正确的手机号码',
}

// 响应式状态
const phoneNumber = ref<string>('')
const errorMsg = ref<string>('')
const isValidPhone = ref<boolean>(false)
const memberStore = useMemberStore()
// 手机号验证方法
const validatePhone = (): void => {
  if (!phoneNumber.value) {
    errorMsg.value = ''
    isValidPhone.value = false
  } else if (phoneNumber.value.length < 11) {
    errorMsg.value = ERROR_MESSAGES.INCOMPLETE
    isValidPhone.value = false
  } else if (!PHONE_REGEX.test(phoneNumber.value)) {
    errorMsg.value = ERROR_MESSAGES.INVALID
    isValidPhone.value = false
  } else {
    errorMsg.value = ''
    isValidPhone.value = true
  }
}

// 处理输入事件
const handlePhoneInput = (e: { detail: { value: string } }): void => {
  const value = e.detail.value
  phoneNumber.value = e.detail.value
  validatePhone()
}

// 清除输入
const clearPhone = (): void => {
  phoneNumber.value = ''
  errorMsg.value = ''
  isValidPhone.value = false
}

// 提交表单
const handleSubmit = async (): Promise<void> => {
  if (!isValidPhone.value) return
  const res = await getCodeAPI(phoneNumber.value)
  if (res.code !== 200) {
    uni.showToast({
      title: res.message,
      icon: 'error',
    })
    return
  }
  memberStore.setTelephone(phoneNumber.value)
  try {
    uni.navigateTo({
      url: '/pages/login/component/codeLogin',
    })
  } catch (error) {
    uni.showToast({
      title: '页面跳转失败',
      icon: 'error',
    })
  }
}
</script>

<style lang="scss">
.phone-container {
  padding: 40rpx;

  .header {
    margin-top: 60rpx;
    margin-bottom: 60rpx;

    .title {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 20rpx;
    }

    .subtitle {
      font-size: 28rpx;
      color: #666;
    }
  }

  .input-area {
    margin-top: 40rpx;

    .phone-input-box {
      position: relative;
      display: flex;
      align-items: center;
      height: 100rpx;
      border-bottom: 1px solid #eee;

      .area-code {
        font-size: 32rpx;
        color: #333;
        margin-right: 20rpx;
      }

      .phone-input {
        flex: 1;
        height: 100%;
        font-size: 32rpx;
      }

      .status-icon {
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40rpx;
        height: 40rpx;

        .valid-icon {
          color: #07c160;
          font-size: 36rpx;
        }

        .clear-icon {
          color: #999;
          font-size: 40rpx;
          padding: 10rpx;
        }
      }
    }

    .error-tip {
      font-size: 24rpx;
      color: #ff4d4f;
      margin-top: 10rpx;
      display: block;
    }
  }

  .button-area {
    margin-top: 80rpx;

    .submit-btn {
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      background: #e80211;
      border-radius: 45rpx;
      font-size: 32rpx;
      color: #fff;
      opacity: 0.5;

      &.btn-active {
        opacity: 1;
      }
    }
  }
}
</style>
